<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
import { graphic } from "echarts/lib/export";
export default {
  data() {
    return {
      options: {
        color: ["#0CF1ED", "#6A5ACD", "#F1FA50"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          icon: "circle",
          data: ["去年", "今年", "同比节能"],
          top: "10",
          itemHeight: 9, //修改icon图形大小
          padding: [15, 0, 0, 0],
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 12,
            padding: [0, 10, 0, 0],
          },
        },
        grid: {
          left: "0%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: true,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: " #48eaff",
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "(Kwh)",
          scale: true,
          nameTextStyle: {
            color: "#48eaff",
            fontSize: 12,
            padding: [0, 0, 0, -40], // 四个数字分别为上右下左与原位置距离
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: " #48eaff",
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          max: 1200,
          interval: 200, //每次增加几个
        },
        series: [
          {
            name: "去年",
            type: "line",
            itemStyle: {
              color: "#48EAFF",
              normal: {
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: "solid",
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#48EAFF",
                    },
                  ]), //线条渐变色
                },
              },
            }, //线条样式
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(255,0,255,0.9)",
                  },
                  {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)",
                  },
                  {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)",
                  },
                ]),
              },
            }, //区域颜色渐变
            data: [40, 80, 100, 130, 180, 250, 400, 410, 420, 480, 600, 610],
          },
          {
            name: "今年",
            type: "line",
            itemStyle: {
              color: "#C63DFF",
              normal: {
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: "solid",
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#C63DFF",
                    },
                  ]), //线条渐变色
                },
              },
            }, //线条样式
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(80,141,255,0.39)",
                  },
                  {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)",
                  },
                  {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)",
                  },
                ]),
              },
            }, //区域颜色渐变
            data: [40, 60, 80, 100, 110, 150, 200, 400, 500, 550, 560, 580],
          },
          {
            name: "同比节能",
            type: "line",
            itemStyle: {
              color: "#6A5ACD",
              normal: {
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: "solid",
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#F1FA50",
                    },
                  ]), //线条渐变色
                },
              },
            }, //线条样式
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(80,141,255,0.39)",
                  },
                  {
                    offset: 0.34,
                    color: "rgba(56,155,255,0.25)",
                  },
                  {
                    offset: 1,
                    color: "rgba(38,197,254,0.00)",
                  },
                ]),
              },
            }, //区域颜色渐变
            data: [40, 50, 70, 100, 120, 150, 170, 190, 200, 220, 235, 260],
          },
        ],
      },
    };
  },
};
</script>
